<template>
  <div class="test-input">
    <h1>Input 输入框</h1>
    <p>基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。</p>
    <h2>基础用法</h2>
    <Input v-model="value" placeholder="请输入内容" clearable @on-clear="clear"></Input>
    <span>value：{{this.value}}</span>
    <p>基本用法，因为组件内部是使用 <code>v-model</code> 来绑定，添加 <code>clearable</code> 属性 设置可清空的输入框。</p>
    <p>可以直接设置 style 来改变输入框的宽度，默认 300px。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input v-model=&quot;value&quot; clearable @on-clear=&quot;clear&quot; &gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            value: ''
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>尺寸</h2>
    <Input size="large" placeholder="large size"></Input>
    <Input size="middle" placeholder="default size"></Input>
    <Input size="small" placeholder="small size"></Input>
    <p>输入框有三种尺寸：大、中、小</p>
    <p>通过设置 <code>size</code> 为 <code>large</code>、<code>middle</code> 和 <code>small</code> 设置为大、中、小尺寸。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input size=&quot;large&quot; placeholder=&quot;large size&quot;&gt;&lt;/Input&gt;
        &lt;Input placeholder=&quot;default size&quot;&gt;&lt;/Input&gt;
        &lt;Input size=&quot;small&quot; placeholder=&quot;small size&quot;&gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>带Icon的输入框</h2>
    <Input icon="icon-search" placeholder="请输入..." @on-click="inputClick"></Input>
    <p>通过 <code>icon</code> 属性可以在输入框右边加一个图标。</p>
    <p>点击图标，会触发 <code>on-click</code> 事件。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input icon=&quot;icon-search&quot; placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>文本域</h2>
    <Input type="textarea" placeholder="请输入..."></Input>
    <Input type="textarea" :rows="4" placeholder="请输入..."></Input>
    <p>通过设置属性 <code>type</code> 为 <code>textarea</code> 来使用文本域，用于多行输入。</p>
    <p>通过设置属性 <code>rows</code> 控制文本域默认显示的行数。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input type=&quot;textarea&quot; placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
        &lt;Input type=&quot;textarea&quot; :rows=&quot;4&quot; placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>适应文本高度的文本域</h2>
    <Input type="textarea" :autosize="true" placeholder="请输入..."></Input>
    <p>设置属性 <code>autosize</code> ，文本域会自动适应高度的变化。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input type=&quot;textarea&quot; autosize=&quot;true&quot; placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>禁用状态</h2>
    <Input disabled placeholder="请输入..."></Input>
    <Input disabled type="textarea" placeholder="请输入..."></Input>
    <p>通过添加 <code>disabled</code> 属性可设置为不可用状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input disabled placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
        &lt;Input disabled type=&quot;textarea&quot; placeholder=&quot;请输入...&quot;&gt;&lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>复合型输入框</h2>
    <Input style="width:300px;">
      <span slot="prepend">http://</span>
      <span slot="append">.com</span>
    </Input>
    <br>
    <Input style="width:300px;">
      <Button slot="append" type="text" class="btnstyle" icon="icon-search"></Button>
    </Input>
    <p>通过前置和后置的 slot 可以实现复合型的输入框。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Input style=&quot;width:300px;&quot;&gt;
          &lt;span slot=&quot;prepend&quot;&gt;http://&lt;/span&gt;
          &lt;span slot=&quot;append&quot;&gt;.com&lt;/span&gt;
        &lt;/Input&gt;
        &lt;br&gt;
        &lt;Input style=&quot;width:300px;&quot;&gt;
          &lt;Button slot=&quot;append&quot; type=&quot;text&quot; icon=&quot;icon-search&quot;&gt;&lt;/Button&gt;
        &lt;/Input&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Input props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Input events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
    <br>
    <p>Input slot</p>
    <Table :columns="tableColumn2" :data="tableData2"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-input',
  data () {
    return {
      value: '',
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '输入框类型，可选值为 text、password、textarea、url、email、date、number、tel',
          type: 'String',
          default: 'text'
        },
        {
          attribute: 'v-model',
          explain: '绑定的值',
          type: 'String | Number',
          default: '-'
        },
        {
          attribute: 'size',
          explain: '输入框尺寸，可选值为large和small或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'placeholder',
          explain: '占位文本',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '设置输入框为禁用状态',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'readonly',
          explain: '设置输入框为只读',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'maxlength',
          explain: '最大输入长度',
          type: 'Number',
          default: '-'
        },
        {
          attribute: 'icon',
          explain: '输入框尾部图标，仅在 text 类型下有效',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'rows',
          explain: '文本域默认行数，仅在 textarea 类型下有效',
          type: 'Number',
          default: '2'
        },
        {
          attribute: 'autosize',
          explain: '自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }',
          type: 'Boolean | Object',
          default: 'false'
        },
        {
          attribute: 'number',
          explain: '将用户的输入转换为 Number 类型',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event',
          width: 200
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          event: 'on-enter',
          type: '按下回车键时触发',
          callback: '无'
        },
        {
          event: 'on-click',
          type: '设置 icon 属性后，点击图标时触发',
          callback: '无'
        },
        {
          event: 'on-change',
          type: '数据改变时触发',
          callback: 'event'
        },
        {
          event: 'on-focus',
          type: '输入框聚焦时触发',
          callback: '无'
        },
        {
          event: 'on-blur',
          type: '输入框失去焦点时触发',
          callback: '无'
        },
        {
          event: 'on-clear',
          type: '输入框清空事件',
          callback: '无'
        }
      ],
      tableColumn2: [
        {
          title: '属性',
          key: 'name',
          width: 200
        },
        {
          title: '说明',
          key: 'explain'
        }
      ],
      tableData2: [
        {
          name: 'prepend',
          explain: '前置内容，仅在 text 类型下有效'
        },
        {
          name: 'append',
          explain: '后置内容，仅在 text 类型下有效'
        }
      ]
    }
  },
  methods: {
    inputClick () {
      alert('您点击了~')
    },
    clear () {
      console.log('clear')
    }
  }
}
</script>

<style scoped lang="less">
.test-input {
  ul {
    li {
      margin-bottom: 20px;
      span {
          display: inline-block;
          width: 150px;
          color: #fff;
      }
    }
  }
}
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
.btnstyle {
  display: flex;
  border: 0;
}
.btnstyle:hover{
  background-color: #f8f8f9;
}
</style>
